<template>
	<view @touchmove.stop.prevent="">
		<view class="zq-pop" :class="{'zq-pop-show':!isFirst && show,'zq-pop-hide':!isFirst && !show}" v-if="mode == 'bottom'">
			<view class="zq-pop-bottom" :class="{'zq-pop-bottom-toTop':!isFirst && show,'zq-pop-bottom-LeaveTop':!isFirst && !show}">
				<view class="zq-pop-title" v-if="popSetting.hasTitle || popSetting.popTitle">
					<text>知秋科技</text>
					<view class="zq-pop-close" @click.stop="close()"></view>
				</view>
				<scroll-view scroll-y="true" class="zq-pop-bottom-content">
					<slot></slot>
				</scroll-view>
				<view class="zq-pop-box" v-if="popSetting.hasButton">
					<view class="zq-pop-btn" v-if="!popSetting.buttonCustom">
						<view class="" @click="cancel()">取消</view>
						<view class="" @click="confirm()">确认</view>
					</view>
					<template v-else>
						<slot name="bottomBox"></slot>
					</template>
				</view>
			</view>
		</view>
		
		<view class="zq-pop" :class="{'zq-pop-show':!isFirst && show,'zq-pop-hide':!isFirst && !show}" v-if="mode == 'center'">
			<view class="zq-pop-center">
				<view class="zq-pop-title" v-if="popSetting.hasTitle || popSetting.popTitle">
					<text>知秋科技</text>
					<view class="zq-pop-close" @click.stop="close()"></view>
				</view>
				<view class="">
					<slot></slot>
				</view>
				<view class="zq-pop-box" v-if="popSetting.hasButton">
					<view class="zq-pop-btn" v-if="!popSetting.buttonCustom">
						<view class="" @click="cancel()">取消</view>
						<view class="" @click="confirm()">确认</view>
					</view>
					<template v-else>
						<slot name="bottomBox"></slot>
					</template>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			value:{
				default:false,
				type:Boolean
			},
			mode:{//bottom center
				default:"bottom",
				type:String
			},
			props:{
				default:null,
				type:Object
			}
		},
		watch:{
			value(nVal){
				this.show = nVal;
				this.isFirst = false;
			}
		},
		data(){
			return{
				isFirst:false,
				show:false,
				popSetting:{
					hasTitle:false,//标题栏
					popTitle:null,//标题
					hasButton:false,//是否显示底部盒子
					buttonCustom:false,//自定义盒子
					disabledConfirm:false,//禁用确认按键
				}
			}
		},
		created() {
			this.show = this.value;
			if(this.props)this.popSetting = Object.assign(this.popSetting,this.props);
		},
		methods:{
			close(){
				this.show = false;
				this.$emit('input',this.show);
				this.$emit('close');
			},
			cancel(){
				this.show = false;
				this.$emit('input',this.show);
				this.$emit('cancel');
			},
			confirm(){
				if(this.popSetting.disabledConfirm){
					this.$emit('confirm');
				}else{
					this.show = false;
					this.$emit('input',this.show);
					this.$emit('confirm');
				}
			}
		}
	}
</script>

<style>
	.zq-pop{width: 750rpx;height: 100vh;z-index: 998;position: fixed;left: 0;top: 0;background: rgba(0,0,0,0.6);}
	.zq-pop-bottom{position: absolute;left: 0;bottom: 0;background: #FFFFFF;width: 750rpx;border-radius: 18rpx 18rpx 0 0;overflow: hidden;}
	.zq-pop-close{position: absolute;width: 40rpx;height: 40rpx;right: 30rpx;top: 15rpx;}
	.zq-pop-close::before{position: absolute;top: 25rpx;left: 0;width: 35rpx;height: 3rpx;background: #666;transform: rotate(45deg);content: "";}
	.zq-pop-close::after{position: absolute;top: 25rpx;left: 0;width: 35rpx;height: 3rpx;background: #666;transform: rotate(-45deg);content: "";}
	.zq-pop-close:active{transform: scale(0.8);transition: all 0.3s;}
	.zq-pop-title{width:100%;height: 80rpx;display: flex;flex-direction: row;align-items: center;justify-content: center;}
	.zq-pop-bottom-content{width: 750rpx;height: 700rpx;}
	.zq-pop-box{width: 100%;height: 120rpx;background: #FFFFFF;}
	.zq-pop-btn{width: 100%;height: 118rpx;display: flex;flex-direction: row;align-items: center;box-sizing: border-box;border-top: 1rpx solid #eee;}
	.zq-pop-btn view{width: 50%;font-size: 34rpx;color: #FFFFFF;text-align: center;line-height: 119rpx;font-weight: bold;}
	.zq-pop-btn view:nth-child(1){color: #333333;border-right: 1rpx solid #eee;}
	.zq-pop-btn view:nth-child(2){color: #388EFF;}
	.zq-pop-btn view:active{background: rgba(0,0,0,0.02);}
	
	
	.zq-pop-show{animation:windowShow 0.3s;transform: translate(0);}
	.zq-pop-hide{animation:windowHide 0.3s;transform: translate(-100%);}
	.zq-pop-toTop{animation: popToTop 0.3s;transform: translateY(0);}
	.zq-pop-LeaveTop{animation: popLeaveTop 0.3s;transform: translateY(100%);}
	@keyframes windowShow{
		from{opacity: 0;}
		to{opacity: 1;}
	}
	@keyframes windowHide{
		from{opacity: 1;}
		to{opacity: 0;}
	}
	@keyframes popToTop{
		from{transform: translateY(100%);}
		to{transform: translateY(0);}
	}
	@keyframes popLeaveTop{
		from{transform: translateY(0);}
		to{transform: translateY(100%);}
	}
	
	.zq-pop-center{position: absolute; width: 690rpx;border-radius: 16rpx;top: 50%;left: 50%;box-sizing: border-box;transform: translate(-50%,-50%);overflow: hidden;}
</style>
